<template>
  <div class="mainPart">
    <!-- 滑动数据模块 -->
    <div class="merchant-list" ref="wrapper">
      <div>
        <!-- 下拉刷新提示 -->
        <van-loading color="#07c160" class="loading" size="24px">{{
          pulldownMsg
        }}</van-loading>
        <div v-if="merchantList.length">
          <router-link
            v-for="(item, index) in merchantList"
            :key="index"
            :to="{ name: 'HotelDetailList', params: { id: item.id } }"
          >
            <van-card
              :tag="item.tag"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.imageURL"
            >
              <div slot="footer">
                <van-rate
                  allow-half
                  void-icon="star"
                  void-color="#eee"
                  v-model="item.grade"
                  readonly
                />
                <!-- <van-button size="mini">按钮</van-button> -->
                <van-button size="mini">按钮</van-button>
              </div>
            </van-card>
          </router-link>

          <!-- 上拉加载提示 -->
          <van-loading color="#07c160" class="pullup" size="24px">
            {{ pullupMsg }}
          </van-loading>
        </div>
      </div>
      <p class="nullData" v-if="!merchantList.length">暂无数据</p>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import axios from "axios";
export default {
  data() {
    return {
      refresh: false,
      load: false,
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      merchantList: [],
      value: 4.5
    };
  },
  created() {
    // 请求旅馆数据
    this.getMerchantInfo();
  },
  mounted() {},
  methods: {
    getMerchantInfo() {
      axios
        .get("/mock/merchant.json")
        .then(this.handleGetDataSucc)
        .catch(function(error) {
          console.log(error);
        });
    },
    handleGetDataSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.merchantList = data;
        // 数据请求完成时初始化滑动模块
        this.hotelA();
      }
    },
    hotelA() {
      const options = {
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true,
        tap: true,
        bounceTime: 900, // 设置回弹动画的动画时长
        useTransition: false // 防止iphone微信滑动卡顿
      };
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, options);
          // 滑动过程中事件
          this.scroll.on("scroll", pos => {
            if (pos.y > 30) {
              this.pulldownMsg = "释放立即刷新";
            }
          });
          //滑动结束松开事件
          this.scroll.on("touchEnd", pos => {
            if (pos.y > 30) {
              //上拉刷新
              //恢复刷新提示文本值
              this.pulldownMsg = "下拉刷新";
              // 重新请求旅馆数据
              this.getMerchantInfo();
            } else if (pos.y < this.scroll.maxScrollY - 30) {
              this.pullupMsg = "加载中。。。";
              let this_ = this;
              setTimeout(() => {
                //恢复文本值
                this_.pullupMsg = "加载更多";
              }, 2000);
              //上拉刷新
              console.log("下拉加载");
            }
          });
        } else {
          //刷新列表后，重新计算滚动区域高度
          console.log("执行了 refresh");
          this.scroll.refresh();
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.mainPart {
}

.merchant-list {
  position: absolute;
  top: 3.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.loading {
  text-align: center;
  width: 100%;
  position: absolute;
  top: -24px;
}

.pullup {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: -24px;
}
</style>
